<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet">
        .redClass{
            color: red;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{username}}
        <!--
         v-on:blur="" 事件绑定  失去焦点

        -->
        <h1> v-on:blur="" 事件绑定  失去焦点
            简写： @blur=""
            v-on:click  简写: @click
        </h1>
        <input type="text" v-model="username" v-on:blur="checkName()" @focus="showMsg()">
        <span v-html="msg" :class="{'redClass':flag}"></span>

        <button @click="btnClick">点我</button>
    </div>


    <script>
       // document.getElementById("app").innerHtml="";

        //1,构建Vue实例
        var app =  new Vue({
            el:"#app",//容器的id
            data:{ //定义数据
                username:"",
                flag:false,
                msg:""
            },
            methods:{
                //蜜糖语法
                checkName(){
                    console.log(this.username!=null&&this.username.length>8&&this.username.length<16);
                    if(!(this.username!=null&&this.username.length>8&&this.username.length<16)){
                        this.msg = "用户名不能为空，且长度为8-16位";
                        this.flag=true;
                    }else{
                        this.msg="";
                    }
                },
                showMsg(){
                    this.msg = "请输入8-16位的用户名";
                    this.flag=false;
                },
                btnClick(){
                    alert('我被点了');
                }
            }

        });

    </script>

</body>
</html>